<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅视界——多语种写作多维智评与可视化系统</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <!-- Header -->
    <header>
        <div class="logo">阅视界</div>
        <ul class="nav-menu">
            <li><a href="index.html" class="active">首页</a></li>
            <li><a href="scoring-page.html">即时评分</a></li>
            <li><a href="history-review.html">评分历史</a></li>
            <li><a href="data-analysis.html">数据分析</a></li>
            <li><a href="feedback.html">反馈中心</a></li>
            <li><a href="guide.html">使用指南</a></li>
        </ul>
        <div class="user-actions">
            <div class="user-info" style="display: none;">
                <span id="username-display" style="cursor: pointer;"></span>
            </div>
            <div class="auth-buttons">
                <button class="primary" onclick="window.location.href='auth.html#login'">登录</button>
                <button onclick="window.location.href='auth.html#register'">注册</button>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <h1 class="hero-title">
                <span class="main-title">阅视界——多语种写作多维智评与可视化系统</span>
                <span class="highlight">AI赋能写作提升</span>
            </h1>
            <p class="hero-description">
                <span class="desc-line">基于深度学习技术，提供专业、全面、即时的作文评估</span>
                <span class="desc-line">让每一次写作都成为进步的阶梯</span>
            </p>
            <div class="hero-buttons">
                <button class="primary-btn" onclick="window.location.href='scoring-page.html'">
                    <i class="fas fa-pencil-alt" ></i>
                    开始评分
                </button>
                <button class="secondary-btn" onclick="window.location.href='guide.html'">
                    <i class="fas fa-book-reader"></i>
                    如何使用
                </button>
            </div>
        </div>
        <div class="hero-image">
            <img src="images/hero-image.png" alt="阅视界——多语种写作多维智评与可视化系统插图">
        </div>
    </section>

    <!-- Features Section -->
    <section class="features">
        <h2 class="section-title">核心功能特色</h2>
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-robot"></i>
                </div>
                <h3>AI智能评分</h3>
                <p>深度学习算法，精准评估作文质量</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-language"></i>
                </div>
                <h3>多语种支持</h3>
                <p>支持多种语言，包括中文、英语、法语、俄语、西班牙语和日语</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-chart-bar"></i>
                </div>
                <h3>数据分析</h3>
                <p>多维度展示写作能力提升</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-lightbulb"></i>
                </div>
                <h3>智能建议</h3>
                <p>个性化的写作改进建议</p>
            </div>
        </div>
    </section>

    <!-- 评分维度展示部分 -->
    <section class="scoring-dimensions">
        <div class="dimensions-wrapper">
            <h2 class="section-title">全方位评分维度</h2>
            <p class="section-desc">基于深度学习的智能评分系统，从多个维度全面评估作文水平</p>

            <div class="dimensions-grid">
                <div class="dimension-row">
                    <div class="dimension-card">
                        <div class="dimension-icon">
                            <i class="fas fa-book-open"></i>
                        </div>
                        <div class="dimension-content">
                            <h3>词汇水平</h3>
                            <ul>
                                <li>词汇丰富度评估</li>
                                <li>用词准确性分析</li>
                                <li>词语搭配检查</li>
                            </ul>
                        </div>
                    </div>
                    <div class="dimension-card">
                        <div class="dimension-icon">
                            <i class="fas fa-pen-fancy"></i>
                        </div>
                        <div class="dimension-content">
                            <h3>句子表达</h3>
                            <ul>
                                <li>句式多样性分析</li>
                                <li>语法规范检查</li>
                                <li>表达流畅度评估</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="dimension-row">
                    <div class="dimension-card">
                        <div class="dimension-icon">
                            <i class="fas fa-layer-group"></i>
                        </div>
                        <div class="dimension-content">
                            <h3>篇章结构</h3>
                            <ul>
                                <li>文章结构分析</li>
                                <li>段落连贯性检查</li>
                                <li>层次逻辑评估</li>
                            </ul>
                        </div>
                    </div>
                    <div class="dimension-card">
                        <div class="dimension-icon">
                            <i class="fas fa-lightbulb"></i>
                        </div>
                        <div class="dimension-content">
                            <h3>内容创新</h3>
                            <ul>
                                <li>主题切合度分析</li>
                                <li>思维深度评估</li>
                                <li>创新性打分</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Data Analysis -->
    <section class="data-analysis">
        <h2 class="section-title">数据分析</h2>
        <p class="section-subtitle">直观的统计与分析结果</p>

        <div class="charts">
            <div class="chart">
                <h3 class="chart-title">评分维度分析</h3>
                <img src="images/radar-chart.png" alt="雷达图" />
            </div>

            <div class="chart">
                <h3 class="chart-title">历史作文进步分析</h3>
                <div class="progress-analysis">
                    <div class="score-comparison">
                        <div class="version">
                            <span class="version-label">版本1</span>
                            <span class="version-score">70分</span>
                        </div>
                        <div class="progress-arrow">
                            <i class="fas fa-long-arrow-alt-right"></i>
                            <span class="improvement">+5分</span>
                        </div>
                        <div class="version">
                            <span class="version-label">版本2</span>
                            <span class="version-score">75分</span>
                        </div>
                    </div>
                    <div class="improvement-details">
                        <div class="improvement-item">
                            <span class="category">词汇总分</span>
                            <span class="change positive">+5分</span>
                            <span class="details">词汇准确性和难度有显著提高</span>
                        </div>
                        <div class="improvement-item">
                            <span class="category">结构总分</span>
                            <span class="change positive">+1分</span>
                            <span class="details">段落连贯性和篇章逻辑有所改善</span>
                        </div>
                        <div class="improvement-item">
                            <span class="category">内容总分</span>
                            <span class="change negative">-1分</span>
                            <span class="details">内容深度和逻辑性略有下降</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- How to Use -->
    <section class="usage">
        <h2 class="section-title">使用流程</h2>
        <p class="section-subtitle">简单三步，快速评分</p>

        <div class="step-cards">
            <div class="step-card">
                <div class="step-icon">
                    <i class="upload-icon">📝</i>
                </div>
                <h3 class="step-title">上传作文</h3>
                <p class="step-description">点击上传按钮，上传你的作文文件</p>
            </div>

            <div class="step-arrow">
                <i class="fas fa-long-arrow-alt-right"></i>
            </div>

            <div class="step-card">
                <div class="step-icon">
                    <i class="analyze-icon">⚙️</i>
                </div>
                <h3 class="step-title">智能评分</h3>
                <p class="step-description">系统自动进行分析与评分</p>
            </div>

            <div class="step-arrow">
                <i class="fas fa-long-arrow-alt-right"></i>
            </div>

            <div class="step-card">
                <div class="step-icon">
                    <i class="report-icon">📊</i>
                </div>
                <h3 class="step-title">查看报告</h3>
                <p class="step-description">获取详细的评分报告</p>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="footer-content">
            <div class="footer-column">
                <h3 class="footer-title">阅视界</h3>
                <p class="footer-description">基于人工智能和深度学习技术，提供客观、全面、准确的作文评分服务，帮助学生提高写作水平。</p>
            </div>

            <div class="footer-column">
                <h3 class="footer-title">链接</h3>
                <ul class="footer-links">
                    <li><a href="#">首页</a></li>
                    <li><a href="guide.html" id="guide-link">使用说明</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3 class="footer-title">联系我们</h3>
                <ul class="footer-links">
                    <li><a href="#" id="contact-link">联系方式</a></li>
                </ul>
            </div>
        </div>

        <div class="footer-bottom">
            <p>© 2025 阅视界——多语种写作多维智评与可视化系统, 保留所有权利</p>
        </div>
    </footer>

    <!-- 联系方式模态窗口 -->
    <div id="contact-modal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>联系我们</h2>
            <div class="contact-info">
                <p><i class="fas fa-envelope"></i> 邮箱：sueyyang1@163.com</p>
                <p><i class="fas fa-phone"></i> 电话：+86 137 2685 1377</p>
                <p><i class="fas fa-map-marker-alt"></i> 地址：广州市番禺区小谷围街道大学城外环东路178号</p>
            </div>
        </div>
    </div>

    <!-- 用户详情模态窗口 -->
    <div id="user-modal" class="modal">
        <div class="modal-content user-modal-content">
            <span class="close-button">&times;</span>
            <div class="user-profile-header">
                <div class="user-avatar">
                    <img src="images/avatar.svg" alt="用户头像">
                </div>
                <h2 id="modal-username"></h2>
            </div>
            <div class="user-details">
                <div class="detail-item">
                    <div class="detail-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="detail-info">
                        <label>邮箱</label>
                        <span id="modal-email"></span>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-icon">
                        <i class="fas fa-fingerprint"></i>
                    </div>
                    <div class="detail-info">
                        <label>用户ID</label>
                        <span id="modal-userid"></span>
                    </div>
                </div>
            </div>
            <div class="logout-section">
                <button class="logout-btn" onclick="handleLogout()">
                    <i class="fas fa-sign-out-alt"></i>
                    退出登录
                </button>
            </div>
        </div>
    </div>

<!--    <script src="script.js"></script>-->
    <script src="common.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取模态窗口元素
            var contactModal = document.getElementById("contact-modal");
            var userModal = document.getElementById("user-modal");
            var contactLink = document.getElementById("contact-link");

            // 获取关闭按钮
            var contactCloseButton = document.querySelector("#contact-modal .close-button");
            var userCloseButton = document.querySelector("#user-modal .close-button");

            // 确保元素存在
            if (contactLink) {
                // 点击"联系方式"链接时显示模态窗口
                contactLink.addEventListener('click', function(event) {
                    event.preventDefault();
                    contactModal.style.display = "block";
                    console.log("联系方式模态窗口已打开");
                });
            }

            // 确保关闭按钮存在并添加事件监听器
            if (contactCloseButton) {
                contactCloseButton.addEventListener('click', function() {
                    contactModal.style.display = "none";
                    console.log("联系方式模态窗口已关闭");
                });
            }

            if (userCloseButton) {
                userCloseButton.addEventListener('click', function() {
                    userModal.style.display = "none";
                    console.log("用户模态窗口已关闭");
                });
            }

            // 点击模态窗口外部时隐藏模态窗口
            window.addEventListener('click', function(event) {
                if (event.target == contactModal) {
                    contactModal.style.display = "none";
                    console.log("点击外部关闭联系方式模态窗口");
                }
                if (event.target == userModal) {
                    userModal.style.display = "none";
                    console.log("点击外部关闭用户模态窗口");
                }
            });

            // 用户信息相关代码
            const userInfo = localStorage.getItem('user');
            const userInfoDiv = document.querySelector('.user-info');
            const authButtons = document.querySelector('.auth-buttons');
            const usernameDisplay = document.getElementById('username-display');
            if (userInfo) {
                const user = JSON.parse(userInfo);
                userInfoDiv.style.display = 'block';
                authButtons.style.display = 'none';
                usernameDisplay.textContent = user.username;

                // 点击用户名显示模态窗口
                usernameDisplay.addEventListener('click', function() {
                    const user = JSON.parse(localStorage.getItem('user'));
                    document.getElementById("modal-username").textContent = user.username;
                    document.getElementById("modal-email").textContent = user.email;
                    document.getElementById("modal-userid").textContent = user.id;
                    userModal.style.display = "block";
                    console.log("用户模态窗口已打开");
                });
            } else {
                userInfoDiv.style.display = 'none';
                authButtons.style.display = 'block';
            }
        });

        // 退出登录处理函数
        function handleLogout() {
            // 清除本地存储的用户信息和token
            localStorage.removeItem('token');
            localStorage.removeItem('user');

            // 关闭模态窗口
            const modal = document.getElementById('user-modal');
            modal.style.display = 'none';

            // 显示成功消息
            showMessage('已成功退出登录');

            // 更新界面显示
            const userInfoDiv = document.querySelector('.user-info');
            const authButtons = document.querySelector('.auth-buttons');

            // 隐藏用户信息，显示登录注册按钮
            userInfoDiv.style.display = 'none';
            authButtons.style.display = 'block';

            // 保持在当前页面（首页）
            window.location.href = 'index.html';
        }

        // 消息提示函数
        function showMessage(message) {
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message-toast';
            messageDiv.textContent = message;
            document.body.appendChild(messageDiv);

            // 添加显示类名以触发动画
            setTimeout(() => messageDiv.classList.add('show'), 10);

            // 3秒后移除消息
            setTimeout(() => {
                messageDiv.classList.remove('show');
                setTimeout(() => messageDiv.remove(), 300);
            }, 3000);
        }
    </script>
    <style>
        /* 添加背景图样式 */
        body {
            background-image: url('images/subtle-pattern.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
        }

        /* 调整页面宽度，使内容更紧凑 */
        .hero, .features, .scoring-dimensions, .data-analysis, .usage {
            max-width: 1200px;
            margin: 0 auto;
            padding: 60px 40px;
        }

        /* 调整hero部分的布局 */
        .hero {
            padding: 60px 40px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 15px;
            margin-top: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            display: flex;
            align-items: flex-start; /* 改为顶部对齐 */
            justify-content: space-between;
        }

        .hero-content {
            max-width: 500px;
            padding-top: 20px; /* 为内容添加顶部间距 */
        }

        .hero-image {
            max-width: 250px; /* 将图片最大宽度从350px减小到250px */
            margin-top: 80px; /* 增加顶部间距，使图片下移 */
            align-self: center; /* 保持原有的垂直居中对齐 */
            margin-right: 100px; /* 保持原有的右侧边距 */
        }

        /* 调整各部分之间的间距 */
        section {
            margin-bottom: 40px;
        }

        /* 为内容区域添加卡片式背景 */
        .features, .scoring-dimensions, .data-analysis, .usage {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        /* 添加孟菲斯色系变量 */
        :root {
            --memphisPink: #FF6B6B;
            --memphisYellow: #FFD93D;
            --memphisBlue: #4ECDC4;
            --memphisPurple: #6A5ACD;
            --memphisOrange: #FF8C42;
        }

        /* 修改功能特色卡片样式 */
        .feature-card:nth-child(1) .feature-icon {
            background: var(--memphisPink);
            color: white;
        }

        .feature-card:nth-child(2) .feature-icon {
            background: var(--memphisYellow);
            color: white;
        }

        .feature-card:nth-child(3) .feature-icon {
            background: var(--memphisBlue);
            color: white;
        }

        .feature-card:nth-child(4) .feature-icon {
            background: var(--memphisOrange);
            color: white;
        }

        /* 修改评分维度图标样式 */
        .dimension-row:nth-child(1) .dimension-card:nth-child(1) .dimension-icon {
            background: linear-gradient(135deg, var(--memphisPink), #FF6B6BDD);
        }

        .dimension-row:nth-child(1) .dimension-card:nth-child(2) .dimension-icon {
            background: linear-gradient(135deg, var(--memphisYellow), #FFD93DDD);
        }

        .dimension-row:nth-child(2) .dimension-card:nth-child(1) .dimension-icon {
            background: linear-gradient(135deg, var(--memphisBlue), #4ECDC4DD);
        }

        .dimension-row:nth-child(2) .dimension-card:nth-child(2) .dimension-icon {
            background: linear-gradient(135deg, var(--memphisPurple), #6A5ACDDD);
        }

        /* 修改浮动元素样式 */
        .float-item:nth-child(1) {
            background: var(--memphisPink);
            color: white;
        }

        .float-item:nth-child(2) {
            background: var(--memphisYellow);
            color: white;
        }

        .float-item:nth-child(3) {
            background: var(--memphisBlue);
            color: white;
        }

        /* 修改使用流程卡片样式 */
        .step-card:nth-child(1) .step-icon {
            background-color: var(--memphisPink);
            color: white;
        }

        .step-card:nth-child(2) .step-icon {
            background-color: var(--memphisYellow);
            color: white;
        }

        .step-card:nth-child(3) .step-icon {
            background-color: var(--memphisBlue);
            color: white;
        }

        /* 模态窗口样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            overflow: auto;
        }

        .modal-content {
            position: relative;
            background-color: #fff;
            margin: 10% auto;
            padding: 30px;
            width: 80%;
            max-width: 600px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            animation: modalFadeIn 0.3s;
        }

        .close-button {
            position: absolute;
            top: 15px;
            right: 20px;
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.2s;
        }

        .close-button:hover {
            color: #333;
        }

        @keyframes modalFadeIn {
            from {opacity: 0; transform: translateY(-20px);}
            to {opacity: 1; transform: translateY(0);}
        }

        /* 联系方式模态窗口样式 */
        .contact-info {
            margin-bottom: 20px;
        }

        .contact-info p {
            margin: 10px 0;
            display: flex;
            align-items: center;
        }

        .contact-info i {
            margin-right: 10px;
            color: #3454d1;
            width: 20px;
        }

        .contact-form h3 {
            margin-bottom: 15px;
        }

        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .contact-form textarea {
            resize: vertical;
        }

        .primary-button {
            background-color: #3454d1;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .primary-button:hover {
            background-color: #2a43a7;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #3454d1;
            cursor: pointer;
        }

        .user-info span:hover {
            color: #2842b8;
        }

        .user-details {
            margin-top: 20px;
        }

        .user-details p {
            margin: 10px 0;
            font-size: 16px;
        }

        .user-details strong {
            display: inline-block;
            width: 80px;
            color: #666;
        }

        /* 新的模态窗口样式 */
        .user-modal-content {
            background: linear-gradient(145deg, #ffffff, #f5f7ff);
            border-radius: 20px;
            padding: 30px;
            max-width: 400px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            border: none;
        }

        .user-profile-header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #f0f0f0;
        }

        .user-avatar {
            width: 100px;
            height: 100px;
            margin: 0 auto 15px;
            border-radius: 50%;
            overflow: hidden;
            border: 4px solid #3454d1;
            box-shadow: 0 5px 15px rgba(52, 84, 209, 0.2);
        }

        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .user-details {
            padding: 0 10px;
        }

        .detail-item {
            display: flex;
            align-items: center;
            margin: 20px 0;
            padding: 15px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s ease;
        }

        .detail-item:hover {
            transform: translateX(5px);
        }

        .detail-icon {
            width: 40px;
            height: 40px;
            background: #f0f4ff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: #3454d1;
            font-size: 1.2em;
        }

        .detail-info {
            flex: 1;
        }

        .detail-info label {
            display: block;
            font-size: 0.9em;
            color: #666;
            margin-bottom: 4px;
        }

        .detail-info span {
            display: block;
            color: #333;
            font-size: 1.1em;
            font-weight: 500;
        }

        .close-button {
            position: absolute;
            right: 20px;
            top: 20px;
            font-size: 24px;
            color: #666;
            cursor: pointer;
            transition: color 0.2s ease;
        }

        .close-button:hover {
            color: #3454d1;
        }

        /* 添加动画效果 */
        @keyframes slideIn {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .modal-content {
            animation: slideIn 0.3s ease-out;
        }

        /* 退出按钮样式 */
        .logout-section {
            margin-top: 30px;
            text-align: center;
            padding-top: 20px;
            border-top: 2px solid #f0f0f0;
        }

        .logout-btn {
            background-color: #ff4d4f;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1em;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin: 0 auto;
            transition: all 0.3s ease;
        }

        .logout-btn:hover {
            background-color: #ff7875;
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(255, 77, 79, 0.2);
        }

        .logout-btn i {
            font-size: 1.1em;
        }

        /* 消息提示样式 */
        .message-toast {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(-100%);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            z-index: 2000;
            transition: transform 0.3s ease;
        }

        .message-toast.show {
            transform: translateX(-50%) translateY(0);
        }

        /* Hero Section 样式 */
        .hero-title {
            font-size: 3.5em;
            line-height: 1.2;
            margin-bottom: 20px;
        }

        .main-title {
            white-space: nowrap;  /* 防止文字换行 */
            display: block;  /* 确保标题独占一行 */
        }

        .highlight {
            display: block;
            color: #3454d1;
            font-size: 0.7em;
            margin-top: 10px;  /* 增加与主标题的间距 */
        }

        .hero-description {
            font-size: 1.2em;
            line-height: 1.6;
            color: #666;
            margin-bottom: 30px;
        }

        .desc-line {
            display: block;
            white-space: nowrap;  /* 防止文字换行 */
            margin-bottom: 10px;  /* 两行之间的间距 */
        }

        .hero-buttons {
            display: flex;
            gap: 20px;
            margin-top: 40px;
        }

        .primary-btn, .secondary-btn {
            padding: 15px 30px;
            border-radius: 30px;
            font-size: 1.1em;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
        }

        .primary-btn {
            background: #3454d1;
            color: white;
            border: none;
        }

        .secondary-btn {
            background: white;
            color: #3454d1;
            border: 2px solid #3454d1;
        }

        .floating-elements {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .float-item {
            position: absolute;
            background: white;
            padding: 15px 25px;
            border-radius: 20px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            gap: 10px;
            animation: float 3s ease-in-out infinite;
            animation-delay: var(--delay);
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        /* 修改功能特色区域的网格布局 */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* 改为2列布局 */
            gap: 30px;
            padding: 40px;
        }

        /* 确保第3和第4个卡片在同一行 */
        .feature-card:nth-child(3),
        .feature-card:nth-child(4) {
            grid-row: 2; /* 放在第二行 */
        }

        .feature-card:nth-child(3) {
            grid-column: 1; /* 第三个卡片在第二行第一列 */
        }

        .feature-card:nth-child(4) {
            grid-column: 2; /* 第四个卡片在第二行第二列 */
        }

        /* 评分维度部分样式 */
        .scoring-dimensions {
            padding: 80px 0;
            background: #f8f9fa;
        }

        .dimensions-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .section-title {
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 15px;
            color: #333;
        }

        .section-desc {
            text-align: center;
            color: #666;
            font-size: 1.1em;
            margin-bottom: 50px;
        }

        .dimensions-grid {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .dimension-row {
            display: flex;
            gap: 30px;
            justify-content: center;
        }

        .dimension-card {
            flex: 1;
            max-width: 500px;
            background: white;
            border-radius: 20px;
            padding: 30px;
            display: flex;
            gap: 20px;
            align-items: flex-start;
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }

        .dimension-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }

        .dimension-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #3454d1, #4c6ef5);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.8em;
            flex-shrink: 0;
        }

        .dimension-content {
            flex: 1;
        }

        .dimension-content h3 {
            margin: 0 0 15px 0;
            font-size: 1.4em;
            color: #333;
        }

        .dimension-content ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .dimension-content li {
            margin: 10px 0;
            color: #666;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .dimension-content li::before {
            content: '•';
            color: #3454d1;
            font-size: 1.5em;
            line-height: 0;
        }

        @media (max-width: 1200px) {
            .hero-content {
                padding-left: 5%;
            }
        }

        @media (max-width: 992px) {
            .hero {
                flex-direction: column;
                padding: 40px 20px;
            }

            .hero-content {
                padding-left: 0;
                text-align: center;
            }

            .hero-buttons {
                justify-content: center;
            }
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.8em;  /* 在小屏幕上适当减小字体大小 */
            }
            .desc-line {
                white-space: normal;  /* 在小屏幕上允许换行 */
                margin-bottom: 5px;
            }
        }

        @media (max-width: 480px) {
            .hero-title {
                font-size: 2.2em;  /* 在更小的屏幕上进一步减小字体大小 */
            }
        }

        /* 修改使用流程区域的布局 */
        .step-cards {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            padding: 40px 20px;
            max-width: 100%; /* 确保不超出父容器 */
            margin: 0 auto;
        }

        .step-card {
            flex: 1;
            max-width: 300px; /* 调整卡片最大宽度 */
            background: white;
            border-radius: 15px;
            padding: 30px 15px; /* 减少水平内边距 */
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s ease;
        }

        .step-card:hover {
            transform: translateY(-10px);
        }

        .step-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            font-size: 2.2em;
        }

        .step-title {
            font-size: 1.4em;
            margin-bottom: 15px;
            color: #333;
            white-space: nowrap; /* 标题不换行 */
        }

        .step-description {
            color: #666;
            line-height: 1.6;
            white-space: normal; /* 描述文字可以换行 */
        }

        .step-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--memphisBlue);
            font-size: 2.8em;
            padding: 0 10px; /* 减少箭头两侧的内边距 */
            flex-shrink: 0;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .step-cards {
                flex-direction: column;
            }

            .step-card {
                margin-bottom: 10px;
                max-width: 100%;
            }

            .step-arrow {
                transform: rotate(90deg);
                margin: 10px 0;
            }
        }

        /* 修改数据分析部分的样式 */
        .data-analysis {
            padding: 60px 40px;
        }

        .data-analysis .section-subtitle {
            text-align: center;
            margin-bottom: 40px;
            color: #666;
        }

        .charts {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
        }

        .chart {
            flex: 1;
            min-width: 300px;
            max-width: 500px;
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            text-align: center;
            transition: transform 0.3s ease;
        }

        .chart:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        .chart-title {
            color: #3454d1;
            margin-bottom: 20px;
            font-size: 1.4em;
            font-weight: 600;
        }

        .chart img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }

        @media (max-width: 768px) {
            .charts {
                flex-direction: column;
            }

            .chart {
                margin-bottom: 20px;
            }
        }

        /* 历史作文进步分析样式 */
        .progress-analysis {
            padding: 15px;
            text-align: left;
        }

        .score-comparison {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 10px;
        }

        .version {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 15px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .version-label {
            font-size: 0.9em;
            color: #666;
            margin-bottom: 5px;
        }

        .version-score {
            font-size: 1.4em;
            font-weight: bold;
            color: #3454d1;
        }

        .progress-arrow {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 20px;
            color: #3454d1;
        }

        .progress-arrow i {
            font-size: 1.8em;
            margin-bottom: 5px;
        }

        .improvement {
            font-weight: bold;
            color: #2ECC71;
        }

        .improvement-details {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .improvement-item {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 6px;
        }

        .category {
            flex: 1;
            font-weight: 500;
        }

        .change {
            margin: 0 15px;
            font-weight: bold;
        }

        .positive {
            color: #2ECC71;
        }

        .negative {
            color: #E74C3C;
        }

        .details {
            flex: 2;
            color: #666;
        }

        @media (max-width: 768px) {
            .improvement-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
            }

            .change {
                margin: 5px 0;
            }
        }
    </style>
</body>
</html>